<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>虚拟钱包系统</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        .container {
            width: 100%;
            max-width: 1200px;
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        header {
            background: #4b6cb7;
            color: white;
            padding: 20px;
            text-align: center;
        }

        h1 {
            font-size: 28px;
            margin-bottom: 10px;
        }

        .subtitle {
            font-size: 16px;
            opacity: 0.8;
        }

        .content {
            display: flex;
            flex-wrap: wrap;
            padding: 20px;
        }

        .wallet-info {
            flex: 1;
            min-width: 300px;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 10px;
            margin: 10px;
        }

        .wallet-actions {
            flex: 2;
            min-width: 300px;
            padding: 20px;
            margin: 10px;
        }

        .card {
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
            padding: 20px;
            margin-bottom: 20px;
        }

        .balance {
            font-size: 36px;
            font-weight: bold;
            color: #4b6cb7;
            margin: 15px 0;
            text-align: center;
        }

        .wallet-id {
            color: #6c757d;
            font-size: 14px;
            text-align: center;
            margin-bottom: 20px;
        }

        .form-group {
            margin-bottom: 15px;
        }

        label {
            display: block;
            margin-bottom: 5px;
            font-weight: 600;
            color: #495057;
        }

        input, select {
            width: 100%;
            padding: 12px;
            border: 1px solid #ced4da;
            border-radius: 8px;
            font-size: 16px;
        }

        button {
            background: #4b6cb7;
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 600;
            width: 100%;
            transition: background 0.3s;
        }

        button:hover {
            background: #3a5999;
        }

        .transaction-history {
            margin-top: 30px;
        }

        h2 {
            font-size: 22px;
            margin-bottom: 15px;
            color: #343a40;
            border-bottom: 2px solid #e9ecef;
            padding-bottom: 10px;
        }

        h3 {
            font-size: 18px;
            margin-bottom: 15px;
            color: #343a40;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #e9ecef;
        }

        th {
            background-color: #f8f9fa;
            font-weight: 600;
        }

        tr:hover {
            background-color: #f8f9fa;
        }

        .transaction-type {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            font-weight: 600;
        }

        .deposit {
            background: #d4edda;
            color: #155724;
        }

        .withdraw {
            background: #f8d7da;
            color: #721c24;
        }

        .transfer {
            background: #cce5ff;
            color: #004085;
        }

        .alert {
            padding: 12px;
            border-radius: 8px;
            margin-bottom: 15px;
            display: none;
        }

        .alert-success {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }

        .alert-error {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }

        @media (max-width: 768px) {
            .content {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
<div class="container">
    <header>
        <h1>虚拟钱包系统</h1>
        <div class="subtitle">基于贫血模型的简单钱包实现</div>
    </header>

    <div class="content">
        <div class="wallet-info">
            <div class="card">
                <h3>我的钱包</h3>
                <div class="balance" id="balance">¥ 1,000.00</div>
                <div class="wallet-id">钱包ID: WALLET-2023-001</div>
            </div>

            <div class="card">
                <h3>创建新钱包</h3>
                <div class="form-group">
                    <label for="currency">选择货币类型</label>
                    <select id="currency">
                        <option value="CNY">人民币 (CNY)</option>
                        <option value="USD">美元 (USD)</option>
                        <option value="EUR">欧元 (EUR)</option>
                        <option value="JPY">日元 (JPY)</option>
                    </select>
                </div>
                <button onclick="createWallet()">创建新钱包</button>
            </div>
        </div>

        <div class="wallet-actions">
            <div id="alertBox"></div>

            <div class="card">
                <h3>钱包操作</h3>
                <div class="form-group">
                    <label for="amount">金额</label>
                    <input type="number" id="amount" placeholder="输入金额" min="0" step="0.01">
                </div>
                <div class="form-group">
                    <label for="targetWallet">目标钱包ID (仅转账需要)</label>
                    <input type="text" id="targetWallet" placeholder="输入目标钱包ID">
                </div>
                <div style="display: flex; gap: 10px;">
                    <button onclick="deposit()" style="background: #28a745;">存款</button>
                    <button onclick="withdraw()" style="background: #dc3545;">取款</button>
                    <button onclick="transfer()" style="background: #ffc107; color: #212529;">转账</button>
                </div>
            </div>

            <div class="card transaction-history">
                <h3>交易记录</h3>
                <table>
                    <thead>
                    <tr>
                        <th>时间</th>
                        <th>类型</th>
                        <th>金额</th>
                        <th>目标钱包</th>
                        <th>状态</th>
                    </tr>
                    </thead>
                    <tbody id="transactionList">
                    <tr>
                        <td>2023-05-01 10:30</td>
                        <td><span class="transaction-type deposit">存款</span></td>
                        <td>+¥ 500.00</td>
                        <td>-</td>
                        <td>成功</td>
                    </tr>
                    <tr>
                        <td>2023-05-02 14:15</td>
                        <td><span class="transaction-type withdraw">取款</span></td>
                        <td>-¥ 200.00</td>
                        <td>-</td>
                        <td>成功</td>
                    </tr>
                    <tr>
                        <td>2023-05-03 09:45</td>
                        <td><span class="transaction-type transfer">转账</span></td>
                        <td>-¥ 300.00</td>
                        <td>WALLET-2023-002</td>
                        <td>成功</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script>
    // 钱包数据对象（贫血模型：只包含数据，不包含逻辑）
    const wallet = {
        id: "WALLET-2023-001",
        balance: 1000.00,
        currency: "CNY",
        transactions: [
            {
                id: 1,
                type: "DEPOSIT",
                amount: 500.00,
                targetWallet: null,
                timestamp: "2023-05-01 10:30",
                status: "SUCCESS"
            },
            {
                id: 2,
                type: "WITHDRAW",
                amount: 200.00,
                targetWallet: null,
                timestamp: "2023-05-02 14:15",
                status: "SUCCESS"
            },
            {
                id: 3,
                type: "TRANSFER",
                amount: 300.00,
                targetWallet: "WALLET-2023-002",
                timestamp: "2023-05-03 09:45",
                status: "SUCCESS"
            }
        ]
    };

    // 钱包服务（包含所有业务逻辑）
    const walletService = {
        // 创建钱包
        createWallet: function(currency) {
            const newWallet = {
                id: "WALLET-" + new Date().getFullYear() + "-" + Math.floor(1000 + Math.random() * 9000),
                balance: 0.00,
                currency: currency,
                transactions: []
            };

            this.showAlert("钱包创建成功! 钱包ID: " + newWallet.id, "success");
            return newWallet;
        },

        // 存款
        deposit: function(amount) {
            if (amount <= 0) {
                this.showAlert("存款金额必须大于0", "error");
                return false;
            }

            wallet.balance += amount;
            wallet.transactions.push({
                id: wallet.transactions.length + 1,
                type: "DEPOSIT",
                amount: amount,
                targetWallet: null,
                timestamp: new Date().toLocaleString(),
                status: "SUCCESS"
            });

            this.updateUI();
            this.showAlert("成功存款: " + amount.toFixed(2) + " " + wallet.currency, "success");
            return true;
        },

        // 取款
        withdraw: function(amount) {
            if (amount <= 0) {
                this.showAlert("取款金额必须大于0", "error");
                return false;
            }

            if (amount > wallet.balance) {
                this.showAlert("余额不足", "error");
                return false;
            }

            wallet.balance -= amount;
            wallet.transactions.push({
                id: wallet.transactions.length + 1,
                type: "WITHDRAW",
                amount: amount,
                targetWallet: null,
                timestamp: new Date().toLocaleString(),
                status: "SUCCESS"
            });

            this.updateUI();
            this.showAlert("成功取款: " + amount.toFixed(2) + " " + wallet.currency, "success");
            return true;
        },

        // 转账
        transfer: function(amount, targetWalletId) {
            if (amount <= 0) {
                this.showAlert("转账金额必须大于0", "error");
                return false;
            }

            if (amount > wallet.balance) {
                this.showAlert("余额不足", "error");
                return false;
            }

            if (!targetWalletId) {
                this.showAlert("请输入目标钱包ID", "error");
                return false;
            }

            wallet.balance -= amount;
            wallet.transactions.push({
                id: wallet.transactions.length + 1,
                type: "TRANSFER",
                amount: amount,
                targetWallet: targetWalletId,
                timestamp: new Date().toLocaleString(),
                status: "SUCCESS"
            });

            this.updateUI();
            this.showAlert("成功转账: " + amount.toFixed(2) + " " + wallet.currency + " 到 " + targetWalletId, "success");
            return true;
        },

        // 显示提示信息
        showAlert: function(message, type) {
            const alertBox = document.getElementById('alertBox');
            alertBox.textContent = message;
            alertBox.className = 'alert';
            alertBox.classList.add(type === 'success' ? 'alert-success' : 'alert-error');
            alertBox.style.display = 'block';

            setTimeout(() => {
                alertBox.style.display = 'none';
            }, 3000);
        },

        // 更新UI显示
        updateUI: function() {
            document.getElementById('balance').textContent =
                (wallet.currency === 'CNY' ? '¥ ' : '$ ') + wallet.balance.toFixed(2);

            const transactionList = document.getElementById('transactionList');
            transactionList.innerHTML = '';

            wallet.transactions.slice().reverse().forEach(transaction => {
                const row = document.createElement('tr');

                const typeClass =
                    transaction.type === 'DEPOSIT' ? 'deposit' :
                        transaction.type === 'WITHDRAW' ? 'withdraw' : 'transfer';

                const typeText =
                    transaction.type === 'DEPOSIT' ? '存款' :
                        transaction.type === 'WITHDRAW' ? '取款' : '转账';

                const sign = transaction.type === 'DEPOSIT' ? '+' : '-';

                row.innerHTML = `
                        <td>${transaction.timestamp}</td>
                        <td><span class="transaction-type ${typeClass}">${typeText}</span></td>
                        <td>${sign}${(wallet.currency === 'CNY' ? '¥ ' : '$ ') + transaction.amount.toFixed(2)}</td>
                        <td>${transaction.targetWallet || '-'}</td>
                        <td>${transaction.status}</td>
                    `;

                transactionList.appendChild(row);
            });
        }
    };

    // 界面操作函数
    function createWallet() {
        const currency = document.getElementById('currency').value;
        walletService.createWallet(currency);
    }

    function deposit() {
        const amount = parseFloat(document.getElementById('amount').value);
        walletService.deposit(amount);
    }

    function withdraw() {
        const amount = parseFloat(document.getElementById('amount').value);
        walletService.withdraw(amount);
    }

    function transfer() {
        const amount = parseFloat(document.getElementById('amount').value);
        const targetWallet = document.getElementById('targetWallet').value;
        walletService.transfer(amount, targetWallet);
    }

    // 初始化
    document.addEventListener('DOMContentLoaded', function() {
        walletService.updateUI();
    });
</script>
</body>
</html>